<template>
	<div id = "report">
		<!-- 十二月份表格 -->
		<div class = "month"  @click="open('right')" >
			<div class ="month-info">
				Jan
			</div>
			<div class="month-surplus">
				+ 6,640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Feb
			</div>
			<div class="month-surplus">
				+ 6,640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Mar
			</div>
			<div class="month-surplus">
				+ 6,640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Apr
			</div>
			<div class="month-surplus">
				+ 6,640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				May
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Jun
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Jul
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Aug
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Sept
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Oct
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Nove
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<div class = "month">
			<div class ="month-info">
				Dec
			</div>
			<div class="month-surplus">
				+ 6640.20
			</div>
		</div>
		<!-- 右弹窗 -->
		<mu-popup position="right" popupClass="popup-right" :open="rightPopup" @close="close('right')">
			<chart :options="polar"></chart>
			<chart :options="polar1" class = "ecarts2"></chart>
		    <mu-raised-button label="关闭" @click="close('right')" class = "closeButton" fullWidth/>
		</mu-popup>
	</div>
</template>
<script>
	export default{
		data () {
		    let data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149]
			let yMax = 500
		    let dataShadow = []
			for (let i = 0; i < data.length; i++) {
			    dataShadow.push(yMax);
			}
			return {
				rightPopup: false,
				polar: {
			        title: { 
			    		show: false,
				    },
				    legend:{
				    	show: true,
				    },
				    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                show:"true",
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
				    grid: {
				    	left: "10%",
				    	top: "10%",
				    	right: "5%",
				    	bottom: "10%"
				    },
				    color: ["#fff"],
				    backgroundColor: "#5DCDBF",
				    xAxis: {
				        type: 'category',
				        boundaryGap: true,
				        axisTick: {
				        	show: false
				        },
				        axisLine: {
				        	show: false,
				        	lineStyle: {
				        		color: '5DCDBF'
				        	}
				        },
				        axisLabel: {
				        	textStyle: {
				        		color: "#fff"
				        	}
				        },
				        splitLine: {
				        	show: false
				        },
				        data: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sept','Oct','Nove','Dec']
				    },
				    yAxis: {
				    	axisLine: {
				    		show: false,
				        	lineStyle: {
				        		color: '5DCDBF'
				        	}
				        },
				        axisTick: {
				        	show: false
				        },
				        axisLabel: {
				        	textStyle: {
				        		color: "#fff"
				        	}
				        },
				        splitLine: {
				        	show: false
				        }
				    },
					series: [{ // For shadow
			            type: 'bar',
			            itemStyle: {
			                normal: {color: 'rgba(0,0,0,0.05)'}
			            },
			            barGap:'-100%',
			            barCategoryGap:'40%',
			            data: dataShadow,
			            barWidth: '40%',
			            animation: false,
			            name: "最高支出"
			        },{
			            name:'该月支出',
			            type:'bar',
			            barWidth: '40%',
			            data:data,
			   			animation: true
			        }],
		      	},
		      	polar1:{
				    title : {
				        text: '支出饼状统计图',
				        textStyle: {
				        	color: "#999"
				        },
				        subtext: '本月支出',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient: 'vertical',
				        left: 'left',
				        data: ['买菜','零食','娱乐','话费','购物']
				    },
				     grid: {
				    	top: "50%"
				    },
				    color:["#86D0EB","#F89A67","#F47272","#A3DCCE","#A5C369"],
				    series : [
				        {
				            name: '本月支出',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:[
				                {value:335, name:'买菜'},
				                {value:310, name:'零食'},
				                {value:234, name:'娱乐'},
				                {value:135, name:'话费'},
				                {value:154, name:'购物'}
				            ],
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
		      	}
			}
		},
		methods:{
			open (position) {
		      	this[position + 'Popup'] = true
		    },
		    close (position) {
		      	this[position + 'Popup'] = false
		    }
		}
	}
</script>
<style scoped>
	#report{
		height: 100vh;
		padding-top: 56px;
		display: flex;
		flex-wrap: wrap;
	}
	.month{
		display: inline-block;
		width: 50%;
		padding: 3vh;
	}
	.month-info{
		height: 20vh;
		background-color: #5DCDBF;
		color: white;
		font-size: 0.9rem;
		text-align: center;
		line-height: 20vh;
	}
	.month-surplus{
		height: 5vh;
		background-color: #e6e6e6;
		color: #5DCDBF;
		font-size: 0.3rem;
		line-height: 5vh;
		text-align: center;
	}
	.echarts {
	  	height: 30vh;
	  	width: 100vw;
	  	background-color: #5DCDBF
	}
	.ecarts2{
		height: 60vh;
	  	width: 100vw;
	  	background-color: #5DCDBF
	}
	.closeButton{
		background-color: #5DCDBF;
		color: white;
	}
</style>
<style>
	.popup-right{
		width: 100%;
		height: 100%;
	}
</style>